<template>
  <div class='echart-map'>
    <div class='chart' id='chart_map'></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import '@/assets/bigscreen/china'

export default {
  name: 'map',
  props: ['stationInfo'],
  mounted() {
    this.getEchart()
  },
  methods: {
    getEchart() {
      let _ = this
      let chartDom = document.getElementById('chart_map')
      let myChart = echarts.init(chartDom)
      let option
      let mapName = 'china'
      let data = []
      let toolTipData = []
      let convertData = function(data) {
        let res = []
        for (let i = 0; i < _.stationInfo.length; i++) {
          res.push({
            name: _.stationInfo[i].city,
            value: [_.stationInfo[i].ln, _.stationInfo[i].lat],
          })
        }
        return res
      }
      option = {
        title: {},
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            if (typeof (params.value)[2] == 'undefined') {
              let toolTiphtml = ''
              for (let i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + ':<br>'
                  for (let j = 0; j < toolTipData[i].value.length; j++) {
                    toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + '<br>'
                  }
                }
              }
              return toolTiphtml
            } else {
              let toolTiphtml = ''
              for (let i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + ':<br>'
                  for (let j = 0; j < toolTipData[i].value.length; j++) {
                    toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + '<br>'
                  }
                }
              }
              return toolTiphtml
            }
          },
        },
        visualMap: {
          show: true,
          min: 0,
          max: 500,
          left: 50,
          bottom: 30,
          text: [], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ['#000B3F', '#1F65AE'],
          },
          textStyle: {
            color: '#1F65AE',
          },
        },
        geo: {
          show: true,
          map: mapName,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#031525',
              borderColor: '#4CCAF0',
              borderWidth: 1,
            },
            emphasis: {
              areaColor: '#2B91B7',
            },
          },
        },
        series: [
          {
            name: '站点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function(val) {
              return val[1] / 1.5
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: '#05C3F9',
              },
            },
          },
          {
            type: 'map',
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff',
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#4CCAF0',
                borderWidth: 2,
              },
            },
            animation: false,
            data: data,
          },
        ],
      }

      option && myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
      // //下钻其实就是点击事件，切换脚本而已
      // myChart.on('click', function(chinaParam) {
      //   console.log(chinaParam, 'aaa')
      //   let option = myChart.getOption()
      //   console.log(option, 'bbb')
      //   option.series[1].map = chinaParam.name
      //   myChart.setOption(option)
      // })
    },
  },
}
</script>

<style lang='scss'>
.echart-map {
  position: relative;
  height: 700px;
  width: 100%;

  .chart {
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 5;
    height: 93%;
    width: 100%;
  }
}

</style>
